<style id="compiled-css" type="text/css">
table { border: 2px solid #000; border-collapse: collapse; 
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
tr:nth-child(2n) td:nth-child(2n+1),tr:nth-child(2n+1) td:nth-child(2n){ background: #aaa; }
td { width: 64px; height: 64px; text-align: center; padding: 0px;}
td div { width: 64px; height: 64px;}
tr:nth-child(1) td, tr:nth-child(10) td { height: 24px; }
tr th:nth-child(n) { width: 24px; }
tr:nth-child(1) td:nth-child(n) { border-bottom: 2px solid #000; background: none; }
tr th:nth-child(1) { border-right: 2px solid #000; background: none; }
tr th:nth-child(10) { border-left: 2px solid #000; background: none; }
tr:nth-child(10) td:nth-child(n) { border-top: 2px solid #000; background: none; border-left: none; }
tr:nth-child(1) th, tr:nth-child(10) th { background: none; background-image:none; border-right: none; border-left: none;} 
.w-pawn { background-image: url("") }
.b-pawn { background-image: url("") }
.w-rook { background-image: url("") }
.b-rook { background-image: url("") }
.w-knight { background-image: url("") }
.b-knight { background-image: url("") }
.w-bishop { background-image: url("") }
.b-bishop { background-image: url("") }
.w-queen { background-image: url("") }
.b-queen { background-image: url("") }
.w-king { background-image: url("") }
.b-king { background-image: url("") }

</style>
<table>
<tr><th></th><td>a</td><td>b</td><td>c</td><td>d</td><td>e</td><td>f</td><td>g</td><td>h</td><th></th></tr>
<tr><th>8</th><td><div id="a8" class="b-rook"/></td><td><div id="b8" class="b-knight"/></td><td><div id="c8" class="b-bishop"/></td><td><div id="d8" class="b-queen"/></td><td><div id="e8" class="b-king"/></td><td><div id="f8" class="b-bishop"/></td><td><div id="g8" class="b-knight"/></td><td><div id="h8" class="b-rook"/></td><th>8</th></tr>
<tr><th>7</th><td><div id="a7" class="b-pawn"/></td><td><div id="b7" class="b-pawn"/></td><td><div id="c7" class="b-pawn"/></td><td><div id="d7" class="b-pawn"/></td><td><div id="e7" class="b-pawn"/></td><td><div id="f7" class="b-pawn"/></td><td><div id="g7" class="b-pawn"/></td><td><div id="h7" class="b-pawn"/></td><th>7</th></tr>
<tr><th>6</th><td><div id="a6" /></td><td><div id="b6" /></td><td><div id="c6" /></td><td><div id="d6" /></td><td><div id="e6" /></td><td><div id="f6" /></td><td><div id="g6" /></td><td><div id="h6" /></td><th>6</th></tr>
<tr><th>5</th><td><div id="a5" /></td><td><div id="b5" /></td><td><div id="c5" /></td><td><div id="d5" /></td><td><div id="e5" /></td><td><div id="f5" /></td><td><div id="g5" /></td><td><div id="h5" /></td><th>5</th></tr>
<tr><th>4</th><td><div id="a4" /></td><td><div id="b4" /></td><td><div id="c4" /></td><td><div id="d4" /></td><td><div id="e4" /></td><td><div id="f4" /></td><td><div id="g4" /></td><td><div id="h4" /></td><th>4</th></tr>
<tr><th>3</th><td><div id="a3" /></td><td><div id="b3" /></td><td><div id="c3" /></td><td><div id="d3" /></td><td><div id="e3" /></td><td><div id="f3" /></td><td><div id="g3" /></td><td><div id="h3" /></td><th>3</th></tr>
<tr><th>2</th><td><div id="a2" class="w-pawn"/></td><td><div id="b2" class="w-pawn"/></td><td><div id="c2" class="w-pawn"/></td><td><div id="d2" class="w-pawn"/></td><td><div id="e2" class="w-pawn"/></td><td><div id="f2" class="w-pawn"/></td><td><div id="g2" class="w-pawn"/></td><td><div id="h2" class="w-pawn"/></td><th>2</th></tr>
<tr><th>1</th><td><div id="a1" class="w-rook"/></td><td><div id="b1" class="w-knight"/></td><td><div id="c1" class="w-bishop"/></td><td><div id="d1" class="w-queen"/></td><td><div id="e1" class="w-king"/></td><td><div id="f1" class="w-bishop"/></td><td><div id="g1" class="w-knight"/></td><td><div id="h1" class="w-rook"/></td><th>1</th></tr>
<tr><th></th><td>a</td><td>b</td><td>c</td><td>d</td><td>e</td><td>f</td><td>g</td><td>h</td><th></th></tr>
</table>
<script>
var l={"a":"className","b":"forEach","c":"querySelector","d":"querySelectorAll"},e=x=>document[l.c]("div#"+x),m=x=>{x=x.toLowerCase().split("-");let fr=e(x[0]),to=e(x[1]);if(fr[l.a]!=""){to[l.a]=fr[l.a];fr[l.a]=""}},mx=x=>(x.includes(";")?x.split(";")[l.b](m):m(x)),
mv;document[l.d]("tr td div")[l.b](x=>{x.ondblclick=x=>mx(prompt("Выполнить ход","-"+x.target.id));x.draggable=true;x.ondragover=y=>y.preventDefault();x.ondragstart=ev=>mv=ev.target;x.ondrop=ev=>{if(ev.target!=mv&&ev.target[l.a][0]!=mv[l.a][0]){ev.target[l.a]=mv[l.a];mv[l.a]="";console.log(mv.id+"-"+ev.target.id)}}}),
fc=(x,y,z)=>{let p={};document[l.d]("tr td div")[l.b](el=>{if(el[l.a]!="")p[el.id]=el[l.a];if(x)el[l.a]=""});return JSON.stringify(p,y,z)};lp=x=>{fc(1);Object.entries(JSON.parse(x))[l.b](el=>e(el[0])[l.a]=el[1])};
document[l.c]("table").ondblclick=x=>navigator.clipboard.writeText(fc(0,0,4));
</script>